<template>
  <page-header-wrapper :title="false">
    <a-card title="官方状态管理" style="width: 700px">
      <a-tabs v-model="tab" @change="onTab">
        <a-tab-pane key="official_10_states" tab="商标"></a-tab-pane>
        <a-tab-pane key="official_30_states" tab="版权"></a-tab-pane>
        <a-tab-pane key="official_50_states" tab="国际"></a-tab-pane>
        <a-tab-pane key="official_90_states" tab="国际商标"></a-tab-pane>
        <a-tab-pane key="official_100_states" tab="国际专利"></a-tab-pane>
      </a-tabs>
      <a-form-model
        ref="stateForm"
        :model="stateForm"
      >
        <a-form-model-item>
          <a-textarea v-model="stateForm[tab]" :rows="6"></a-textarea>
        </a-form-model-item>
        <a-form-model-item>
          <a-button size="small" icon="save" type="primary" :loading="loading" @click="saveState">保存官方状态</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getSaveState, postSaveState } from '@/api/business'

export default {
  name: 'TradeState',
  data () {
    return {
      loading: false,
      stateForm: {},
      categoryOpts: {},
      tab: 'official_10_states'
    }
  },
  created () {
    this.getAllState()
  },
  methods: {
    getAllState () {
      getSaveState().then(res => {
        this.categoryOpts = res.result.categoryOpts
        this.stateForm = res.result.setting
      })
    },
    saveState () {
      const app = this
      const data = {}
      data['setting[' + app.tab + ']'] = app.stateForm[app.tab]
      app.loading = true
      postSaveState(data).then(res => {
        if (res.status === 0) {
          app.getAllState()
        } else {
          app.$warning({
            title: res.msg
          })
        }
      }).finally(() => {
        app.loading = false
      })
    },
    onTab (key) {
      this.tab = key
    }
  }
}
</script>

<style scoped>

</style>
